<template>
  <a-modal
    v-model:open="visible"
    :mask-closable="false"
    width="40%"
    title="查看"
    :dialog-style="{ top: '20px' }"
    :footer="null"
  >
    <div v-if="visible" v-permission="['promotions:member-day:query']" v-loading="loading">
      <a-divider>基本信息</a-divider>
      <a-descriptions :column="4" :labelStyle="{ width: '120px' }" bordered>
        <a-descriptions-item label="会员活动名称" :span="2">
          {{ formData.name }}
        </a-descriptions-item>
        <a-descriptions-item label="会员活动类型" :span="2">
          {{ $enums.PROMOTIONS_TYPE.getDesc(formData.promotionsType) }}
        </a-descriptions-item>
        <a-descriptions-item label="会员活动时间" :span="4">
          {{ formData.beginDate }} - {{ formData.endDate }}
        </a-descriptions-item>
        <a-descriptions-item label="会员活动范围" :span="2">
          {{ $enums.SCOPE_TYPE.getDesc(formData.scopeType) }}
        </a-descriptions-item>
        <a-descriptions-item label="参加方式" :span="2">
          {{ $enums.ATTEND_TYPE.getDesc(formData.attendType) }}
        </a-descriptions-item>
        <a-descriptions-item label="领取模式" :span="2">
          {{ $enums.CLAIM_MODE.getDesc(formData.claimMode) }}
        </a-descriptions-item>
        <a-descriptions-item label="活动状态" :span="2">
          <marketing-state-tag :marketing-state="formData.marketingState" />
        </a-descriptions-item>
      </a-descriptions>
      <a-divider>权益信息</a-divider>
      <a-descriptions :column="4" :labelStyle="{ width: '120px' }" bordered>
        <a-descriptions-item label="适用会员等级" :span="4">
          <a-row>
            <a-col :span="24">
              {{ formData.allMemberLevel ? '全部会员等级' : '' }}
              <member-level-selector
                v-if="!formData.allMemberLevel"
                v-model:value="formData.memberLevelIds"
                :multiple="true"
                :show-sum="true"
                :readOnly="true"
              />
            </a-col>
          </a-row>
        </a-descriptions-item>
        <a-descriptions-item label="权益" :span="4">
          <a-row v-if="formData.discountFlag">
            <a-col :span="24">
              消费折扣: <a>{{ formData.discountValue || 0 }}</a> 折
            </a-col>
          </a-row>
          <a-row v-if="formData.scoreFlag">
            <a-col :span="24">
              赠送 <a>{{ (formData.scoreValue || 0).toFixed(2) }}</a> 积分
            </a-col>
          </a-row>
          <a-row v-if="formData.consumeScoreFlag">
            <a-col :span="24">
              消费赠送 <a>{{ formData.consumeScoreRate || 0 }}</a> 倍积分
            </a-col>
          </a-row>
          <a-row v-if="formData.couponFlag">
            <a-col> 赠送卡券:</a-col>
            <a-col>
              <coupon-selector
                v-model:value="formData.couponIds"
                :multiple="true"
                :show-sum="true"
                :readOnly="true"
              />
            </a-col>
          </a-row>
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </a-modal>
</template>
<script>
  import { defineComponent } from 'vue';
  import * as api from '@/api/promotions/member/day';
  import MemberLevelSelector from '@/components/Selector/src/MemberLevelSelector.vue';
  import CouponSelector from '@/components/Selector/src/CouponSelector.vue';
  import MarketingStateTag from '@/components/Tag/src/MarketingStateTag.vue';

  export default defineComponent({
    // 使用组件
    components: { MarketingStateTag, CouponSelector, MemberLevelSelector },
    props: {
      id: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        // 是否可见
        visible: false,
        // 是否显示加载框
        loading: false,
        // 表单数据
        formData: {},
      };
    },
    created() {
      this.initFormData();
    },
    methods: {
      // 打开对话框 由父页面触发
      openDialog() {
        this.visible = true;

        this.$nextTick(() => this.open());
      },
      // 关闭对话框
      closeDialog() {
        this.visible = false;
        this.$emit('close');
      },
      // 初始化表单数据
      initFormData() {
        this.formData = {
          name: '',
          beginDate: '',
          endDate: '',
          promotionsType: 1,
          scopeType: 1,
          attendType: 1,
          claimMode: 1,
          allMemberLevel: true,
          memberLevelIds: [],
          consumeScoreFlag: false,
          consumeScoreRate: null,
          scoreFlag: false,
          scoreValue: null,
          couponFlag: false,
          couponIds: [],
          discountFlag: false,
          discountValue: null,
          marketingState: 3,
        };
      },
      // 页面显示时触发
      open() {
        // 初始化数据
        this.initFormData();

        // 查询数据
        this.loadFormData();
      },
      // 查询数据
      loadFormData() {
        this.loading = true;
        api
          .get(this.id)
          .then((data) => {
            this.formData = data;
            console.log('formData', this.formData);
          })
          .finally(() => {
            this.loading = false;
          });
      },
    },
  });
</script>
